<template>
    <div class="orders">
       <div class="search">
          <div>
            <el-input style="width: 200px; margin-right: 20px;"  placeholder="请输入商品名称"  v-model="goodsName"></el-input>
            <el-input style="width: 200px; margin-right: 20px;"  placeholder="请输入最低价格" v-model="lowPrice"></el-input>
            <el-input style="width: 200px; margin-right: 20px;"  placeholder="请输入最高价格" v-model="highPrice"></el-input>
            <el-button type="primary" @click="search">搜索</el-button>
          </div>
            <div class="add">   
                <p style="font-size: 25px;">+</p>
                <p style="font-size: 14px;">添加</p>
            </div>
       </div>
       <div class="tab">
          <template>
                <el-table
               
                :data="ordersData"
                style="width: 100%"
                :cell-style="{ textAlign: 'center', fontSize: '16px', color: '#000' }"
                :header-cell-style="{ color: '#000', fontSize: '16px', textAlign: 'center' }">
                    <el-table-column
                        prop="orderId"
                        label="订单号"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="fullname"
                        label="商品名称"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="unitcost"
                        label="商品原价">
                    </el-table-column>
                    <el-table-column
                    prop="vipcost"
                        label="会员价">
                    </el-table-column>
                    <el-table-column
                    prop="price"
                        label="实际价格">
                    </el-table-column>
                     <el-table-column
                        prop="username"
                        label="会员名">
                    </el-table-column>
                     <el-table-column
                        prop="storename"
                        label="门店名">
                    </el-table-column>
                    <el-table-column
                        prop="tel"
                        label="联系方式">
                    </el-table-column>
                     <el-table-column>
                         <template slot="header">
                             <el-select v-model="stateValue" placeholder="请选择" @change="selectState">
                                <el-option
                                v-for="item in stateList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                        <template slot-scope="scope">
                            <div :class="decideState(scope.row.orderstatus) == '已收货' ? 'green' : 'red'">
                                {{decideState(scope.row.orderstatus)}}
                            </div>
                        </template>
                    </el-table-column>
                     <el-table-column
                        width="200"
                        label="更多">
                        <template slot-scope="scope">
                            <div>
                                <el-button :type="decideState(scope.row.orderstatus) ==  '待收货'? 'primary' : 'info'" >发货</el-button>
                                <el-button :type="decideState(scope.row.orderstatus) == '已收货' ? 'danger' : 'info'" >退货</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
       </div>
       <div class="bottom" >
            <div class="bottom-box">
                <el-button @click="changePage('prev')">上一页</el-button>
                <el-pagination
                    background
                    layout="pager"
                    :page-size="3"
                    :current-page="page"
                    @current-change="fn"
                    :total="total">
                </el-pagination>
                <el-button @click="changePage('next')">下一页</el-button>
            </div>
        </div>
    </div>
</template>
<script>

import { post } from '@/api/api'; 
export default {
    created(){
        this.getOrders(1,10)
        this.total=this.ordersData.length
        
    },
    data() {
        return {
            ordersData:[],
            goodsName: "",
            lowPrice: "",
            highPrice: "",
            total:1,
            stateList: [{
                value: "订单状态",
                label: '订单状态'
            }, {
                value: 0,
                label: '待付款'
            }, {
                value: 1,
                label: '已付款'
            }, {
                value: 2,
                label: '待发货'
            }, {
                value: 3,
                label: '待收货'
            }, {
                value: 4,
                label: '已收货'
            }
            , {
                value: 5,
                label: '退货'
            }],
            page:1,
            stateValue: "订单状态",
            str:""
        }
    },
    methods: {
        decideState(content) {
            // 订单状态：0：待付款；1已付款；2待发货；3待收货；4已收货 5退货
            switch (content) {
                case 0:
                    return "待付款";
                case 1:
                    return "已付款"
                case 2:
                    return "待发货"
                case 3:
                    return "待收货"
                case 4:
                    return "已收货"
                case 5:
                    return "退货"
            }
        },
        // 拿下拿下，下播了！！！！OK
        selectState(val){
            if(val==="订单状态"){
            this.getOrders(1,10)
           }else{
            this.ordersData=JSON.parse(this.str)
            const da=this.ordersData.filter(item=>{  
                if(item.orderstatus==val){
                    return item
                }
            })
            this.ordersData=da
           }
            
        },
        async search(){
            const formData=new FormData()
            formData.append("fullname",this.goodsName)
            formData.append("max",this.highPrice)
            formData.append("min",this.lowPrice)
            const params = new URLSearchParams(formData)
            const da= await get(`goods/list/${this.page}/5?${params.toString()}`)
            this.goodsList=da.data.list.records
        },
        async getOrders(pageNum,pageSize){
            const da=await post("/orders/getList",{ pageSize, pageNum})
            this.ordersData=da.data
            this.str=JSON.stringify(da.data)
        },
        fn(page){
            this.page=page
            this.getOrders(this.page,5)
        },
        changePage(type){
            if(type=="prev"){
               if(this.page===1){
               this.page=1
               this.$message.warning("已经是第一页了")
               }else{
                this.page--
                this.getOrders(this.page,5)
               }
            }else if(type=="next"){
               if(this.page>=this.total/5){
                    this.page=this.total/5
                    this.$message.warning("已经是最后一页了")
               }else{
                this.page++
                this.getOrders(this.page,5)
               }
            }
        }
    }
}
</script>
<style scoped>
.search {
    display: flex;
    padding-left: 30px;
    justify-content: space-between;
}

.add {
    width: 50px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.orders {
    padding: 50px 50px 0 50px;
    width: 100%;
    height: 88vh;
    display: flex;
    flex-direction: column;
}

.bottom {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination {
    width: 50px;
}

.tab {
    width: 100%;
    flex: 1;
    margin-top: 20px;
}

.bottom-box {
    display: flex;
    height: 40px;
    align-items: center;

}

.green {
    color: #30de70;
    font-size: 17px;
}

.red {
    color: red;
    font-size: 17px;
}
</style>